$pri_color: #8A95B1;
$sub_color: #F1F4FD;
$nav_transition: .3s all ease-out;
/* Global */
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

i {
  font-style: normal;
}

ul li {
  list-style-type: none;
}

/* Platform */
.c-main {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f2f2fd;
  overflow-y: hidden;
  z-index: 99;
  .g-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    width: 100%;
    height: 45px;
    .u-logo {
      width: 200px;
      height: 35px;
      background: url("../resources/logo-main.png") center/contain no-repeat;
    }
    .u-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .u-btn-logout {
        margin-right: 15px;
        font-size: 12px;
        color: #333;
        cursor: pointer;
      }
      .u-btn-release {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        padding: 5px 22px;
        font-size: 12px;
        background-color: #62bcc0;
        color: #fff;
        cursor: pointer;
        transition: $nav_transition;
        &:hover {
          background-color: #478a8e;
        }
      }
    }
  }
  .g-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    .g-nav {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 230px;
      height: 100%;
      background-color: #fff;
      box-shadow: 3px 0 5px rgba(0, 0, 0, 0.29);
      transition: $nav_transition;
      .u-switch {
        position: absolute;
        right: 10px;
        top: 20px;
        height: 12px;
        width: 12px;
        background: url("../resources/icon-back.png") center/contain no-repeat;
        cursor: pointer;
        transform: scale(1);
        transition: $nav_transition;
        &:hover {
          transform: scale(1.1);
        }
      }
      .m-user {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 150px;
        background-color: #8a95b3;
        transition: $nav_transition;
        .u-head {
          box-sizing: border-box;
          padding: 4px;
          width: 70px;
          height: 70px;
          border-radius: 70px;
          background-color: #fff;
          box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 1px;
          cursor: pointer;
          .u-head-img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background: url("../resources/head1.png") center/contain no-repeat;
          }
        }
        .u-text {
          height:18px;
          margin-top: 5px;
          font-size: 14px;
          color: #fff;
          opacity: 1;
          transition: $nav_transition;
        }
      }
      .m-list {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
        width: 100%;
        .m-item {
          position: relative;
          width: 100%;
          height: 60px;
          background-color: #fff;
          border-bottom: 1px solid #dfdfdf;
          cursor: pointer;
          transition: $nav_transition;
          .u-icon {
            display:inline-block;
            position: absolute;
            left:50%;
            top:50%;
            width: 24px;
            height: 24px;
            transform: translate(-35px,-12px);
            transition: $nav_transition;
          }
          .u-icon-home {
            background: url("../resources/icon-home.png") center/contain no-repeat;
          }
          .u-icon-task {
            background: url("../resources/icon-task.png") center/contain no-repeat;
          }
          .u-icon-fair {
            background: url("../resources/icon-fair.png") center/contain no-repeat;
          }
          .u-icon-feedback {
            background: url("../resources/icon-feedback.png") center/contain no-repeat;
          }
          .u-text {
            position: absolute;
            left:50%;
            top:50%;
            color: #333;
            font-size: 12px;
            transform: translate(0,-8px);
            transition: $nav_transition;
          }
          &:hover {
            background-color: #7e879c;
            .u-icon-home {
              background: url("../resources/icon-home-active.png") center/contain no-repeat;
            }
            .u-icon-task {
              background: url("../resources/icon-task-active.png") center/contain no-repeat;
            }
            .u-icon-fair {
              background: url("../resources/icon-fair-active.png") center/contain no-repeat;
            }
            .u-icon-feedback {
              background: url("../resources/icon-feedback-active.png") center/contain no-repeat;
            }
            .u-text {
              color: #fff;
            }
          }
        }
        .m-item-active {
          background-color: #bfc7dd;
          .u-icon-home {
            background: url("../resources/icon-home-active.png") center/contain no-repeat;
          }
          .u-icon-task {
            background: url("../resources/icon-task-active.png") center/contain no-repeat;
          }
          .u-icon-fair {
            background: url("../resources/icon-fair-active.png") center/contain no-repeat;
          }
          .u-icon-feedback {
            background: url("../resources/icon-feedback-active.png") center/contain no-repeat;
          }
          .u-text {
            color: #fff;
          }
        }
      }
    }
    .g-nav-hide{
      width:90px;
      .u-switch{
        transform: rotate(180deg);
        &:hover{
          transform: rotate(180deg);
        }
      }
      .m-user{
        .u-text{
          opacity: 0;
          margin:0;
          height:0;
        }
      }
      .m-list{
        .m-item{
          flex-direction: column;
          .u-icon{
            transform: translate(-50%,-22px);
          }
          .u-text{
            transform: translate(-50%,5px);
          }
        }
      }
    }
    .g-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      .m-notice {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        overflow: hidden;
        background-color: #fff;
        font-size: 12px;
        color: #787052;
        border-bottom:1px solid #dedede;
        .u-box{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .u-icon {
            margin-right: 10px;
            height: 14px;
            width: 14px;
            background: url("../resources/icon-notice.gif") center/contain no-repeat;
          }
          .u-text {
            margin-right: 10px;
          }
          .u-name{
            margin-right: 5px;
            color: #f96436;
          }
          .u-content{
            margin-right: 40px;
          }
          .u-time{

          }
        }
      }
      .g-article {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        width: 100%;
        .g-article-iframe{
          width: 100%;
          height:100%;
          overflow-y: auto;
        }
      }
    }
  }
}
.c-article{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding:15px 0;
  width:100%;
  background-color: #f2f2fd;
  transition: $nav_transition;
  .g-hot,.g-progress,.g-info,.g-select,.g-feedback,.g-task-base-info,.g-task-result,.g-task-result-info,.g-fair-base-info,.g-fair-task-info,.g-passport-base-info,.g-passport-auth-info,.g-feedback-success,.g-task-choice-list,.g-task-success,.g-task-detail-list{
    min-width:1060px;
    padding: 0 40px;
    .u-title{
      position: relative;
      padding-left:15px;
      width:100%;
      font-size: 16px;
      color: #666;
      &:before{
        content:'';
        position: absolute;
        left:0;
        top:2px;
        height:16px;
        width:3px;
        background-color: #f97a5b;
      }
    }
    .m-list{
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top:25px;
      width:100%;
      .m-item{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 30%;
        height:360px;
        padding:13px 10px;
        background: url("../resources/demo1.png") center/cover no-repeat;
        background-size: 110%;
        transition: $nav_transition;
        .m-panel{
          width:100%;
          padding:0 10px;
          background-color: rgba(255, 255, 255, 0.9);
          border:1px solid #dedede;
          .u-top{
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            margin-top:10px;
            width:100%;
            .u-head{
              margin-right:10px;
              width:65px;
              height:65px;
              border-radius: 100%;
              box-shadow: #333 1px 1px 1px;
              background: url("../resources/head1.png") center/cover no-repeat;
              cursor: pointer;
            }
            .u-head-title{
              flex: 1;
              .u-name{
                font-size: 16px;
                font-weight: bold;
                color:#2e2e2e;
              }
              .u-tips{
                margin-top:3px;
                font-size: 10px;
                color: #b0b0b0;
              }
            }
          }
          .u-mid{
            display:flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-around;
            margin-top:10px;
            width:100%;
            .u-data{
              .u-row{
                display:flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                margin-top:5px;
                width:100%;
                .u-icon{
                  margin-right:7px;
                  width:12px;
                  height:12px;
                }
                .u-icon-jdl{
                  background: url("../resources/icon-small-jdl.png") center/contain no-repeat;
                }
                .u-icon-djl{
                  background: url("../resources/icon-small-djl.png") center/contain no-repeat;
                }
                .u-icon-zhl{
                  background: url("../resources/icon-small-zhl.png") center/contain no-repeat;
                }
                .u-text{
                  font-size: 10px;
                  font-weight: bold;
                }
              }
            }
            .u-btn{
              padding:5px 12px;
              background-color: #000;
              font-size: 14px;
              color: #fff;
              cursor: pointer;
              transition: $nav_transition;
              &:hover{
                background-color: #303030;
              }
            }
          }
          .u-bottom{
            margin-top:15px;
            border-top:1px solid #a7a7a7;
            width:100%;
            overflow: hidden;
            transition: $nav_transition;
            .u-down-more{
              display:flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              height:20px;
              overflow: hidden;
              opacity: 1;
              transition: $nav_transition;
              .u-down-more-icon{
                width:20px;
                height:20px;
                background: url("../resources/icon-down-more.png") center/contain no-repeat;
                cursor: pointer;
              }
            }
            .u-list{
              width:100%;
              transition: $nav_transition;
              .u-item{
                display:flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: flex-end;
                width:100%;
                height:0;
                padding:0;
                border-bottom:0px solid #a7a7a7;
                overflow: hidden;
                opacity: 0;
                transition: $nav_transition;
                .u-content{
                  .u-content-title{
                    width:100%;
                    font-size: 10px;
                  }
                  .u-data{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-top:3px;
                    width:100%;
                    .u-data-icon{
                      margin-right:5px;
                      width:12px;
                      height:12px;
                      background: url("../resources/icon-small-djl-red.png") center/contain no-repeat;
                    }
                    .u-text{
                      font-size: 10px;
                      color: #f88265;
                    }
                  }
                }
                .u-btn{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width:50px;
                  height:29px;
                  border-radius: 3px;
                  cursor: pointer;
                  .u-detail{
                    width:20px;
                    height:20px;
                  }
                }
                .u-btn-success{
                  background-color: #f97a5b;
                  .u-detail{
                    background: url("../resources/icon-btn-success.png") center/contain no-repeat;
                  }
                }
                .u-btn-working{
                  background-color: #62bcc0;
                  .u-detail{
                    background: url("../resources/icon-btn-working.png") center/contain no-repeat;
                  }
                }
                &:last-child{
                  border-bottom:0;
                }
              }
            }
          }
          .u-bottom-active{
            .u-down-more{
              height:0;
              opacity: 0;
            }
            .u-list{
              .u-item{
                height:52px;
                padding: 10px 0 7px 0;
                border-bottom:1px solid #a7a7a7;
                opacity: 1;
              }
            }
          }
        }
        &:hover{
          background-size: 115%;
        }
      }
    }
    .m-btn{
      display:flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top:30px;
      width:100%;
      .u-more{
        padding: 4px 16px;
        font-size: 14px;
        color: #000;
        border: 1px solid #000;
        cursor: pointer;
        user-select: none;
        transition: $nav_transition;
        &:hover{
          color: #fff;
          background-color: #000;
        }
      }
    }
  }
  .g-progress{
    margin-top:30px;
    .u-progress-title{
      &:before{
        background-color: #62cec9;
      }
    }
    .m-progress-list{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      margin-top:25px;
      width:100%;
      .u-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 31%;
        padding:13px 13px;
        background-color: #fff;
        box-shadow: #dedede 1px 1px 3px;
        .u-top{
          padding:0 0 10px 3px;
          width:100%;
          font-size: 16px;
          font-weight: bold;
          color: #2e2e2e;
          border-bottom:1px solid #e5e5e5;
          cursor: pointer;
        }
        .u-mid{
          display: flex;
          flex-direction: column;
          width:100%;
          .u-data{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            .u-data-text{
              .u-point{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                margin-top:10px;
                .u-icon{
                  margin-right: 7px;
                  width:12px;
                  height:12px;
                }
                .u-icon-djl{
                  background: url("../resources/icon-small-jdl.png") center/contain no-repeat;
                }
                .u-icon-time{
                  background: url("../resources/icon-small-time.png") center/contain no-repeat;
                }
                .u-text,.u-text-red{
                  font-size: 10px;
                }
                .u-text-red{
                  margin-left:5px;
                  color: #f97a5b;
                }
              }
            }
            .u-btn{
              position: relative;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              margin-top:5px;
              width:80px;
              height:29px;
              background-color: #62bcc0;
              border:1px solid #62bcc0;
              .u-btn-text{
                position: relative;
                font-size:14px;
                color: #fff;
              }
            }
          }
          .u-member{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin-top:10px;
            min-height:188px;
            width:100%;
            .u-content{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width:82px;
              .u-head{
                width:100%;
                height:82px;
                background: url("../resources/head1.png") center/cover no-repeat;
                cursor: pointer;
              }
              .u-name{
                margin-top:5px;
                font-size: 10px;
              }
              .u-data{
                margin-top:5px;
                .u-data-icon{
                  margin-right:5px;
                  width:12px;
                  height:12px;
                  background: url("../resources/icon-small-djl-red.png") center/cover no-repeat;
                }
                .u-data-text{
                  font-size: 10px;
                  color: #f97a5b;
                }
              }
            }
          }
        }
        .u-bottom{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width:100%;
          margin-top:10px;
          padding-top: 10px;
          border-top: 1px solid #e5e5e5;
          font-size:12px;
          cursor: pointer;
          transition: $nav_transition;
          &:hover{
            color: #62bcc0;
          }
        }
      }
    }
  }
  /* taskForm */
  .g-info{
    .m-panel{
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-top:20px;
      width:100%;
      padding:0 35px 10px 35px;
      background-color: #fff;
      box-shadow: 1px 1px 1px rgba(222, 222, 222, 0.82);
      .m-row{
        display:flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 15px;
        width:100%;
        .u-row-title{
          margin-top:15px;
          width: 150px;
          padding-right:30px;
          text-align: right;
          font-size: 14px;
          color: #333;
        }
        .u-row-title-short{
          width: 80px;
        }
        .u-row-box{
          display:flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;
          flex: 1;
          min-height: 50px;
          .u-row-box-input{
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex: 1;
            height:35px;
            padding:0 10px;
            background-color: #f2f2fd;
            border:1px solid #bfc7dd;
            border-radius: 2px;
            .u-row-cell-input{
              flex: 1;
              background-color: transparent;
              border:0;
              box-shadow: none;
            }
            .u-row-cell-check{
              flex: 1;
              background-color: transparent;
              border:0;
              box-shadow: none;
              text-align: center;
            }
            .u-row-cell-tip{
              padding-left:30px;
              font-size: 14px;
              color: #333;
            }
          }
          .u-row-box-check{
            cursor: pointer;
          }
          .u-row-box-check-active{
            background-color: $pri_color;
            color: #fff;
          }
          .u-row-box-label{
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding:0 15px;
            .u-row-cell-and{
              width:20px;
              height:1px;
              background-color: #606060;
            }
          }
          .u-row-box-textarea{
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            flex: 1;
            height:170px;
            padding:20px 10px;
            background-color: #f2f2fd;
            border:1px solid #bfc7dd;
            border-radius: 2px;
            .u-row-cell-textarea{
              flex: 1;
              height:100%;
              resize: none;
              background-color: transparent;
              border:0;
              box-shadow: none;
            }
          }
          .u-row-box-upload{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding:20px 30px;
            background-color: #f2f2fd;
            border:1px solid #bfc7dd;
            border-radius: 2px;
            .u-row-cell-upload{
              display:flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
              width:100%;
              height: 140px;
              .u-row-cell-upload-btn{
                width: 30%;
                height: 140px;
                padding:10px;
                background-color: #fff;
                box-shadow: 1px 1px 3px #dedede;
                cursor: pointer;
                .u-row-cell-upload-btn-border{
                  width:100%;
                  height:100%;
                  border:1px dashed #828282;
                }
                .error{
                  background: #f43838;
                  color: #fff;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  height: 28px;
                  line-height: 28px;
                  width: 100%;
                  z-index: 100;
                }
                .success{
                  background: green;
                  display: block;
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  height: 40px;
                  width: 100%;
                  z-index: 200;
                }
              }
            }
            .u-row-cell-upload-more{
              margin-bottom:20px;
              padding:5px 15px;
              font-size: 14px;
              border:1px solid #000;
              cursor: pointer;
              transition: $nav_transition;
              &:hover{
                background-color: #000;
                color: #fff;
              }
            }
          }
          .u-row-box-upload-left{
            padding:0 !important;
            background-color: #fff !important;
            border:0 !important;
            .u-row-cell-upload{
              justify-content: flex-start !important;
              .u-row-cell-upload-btn{
                margin-right:20px;
                .u-row-cell-upload-btn-border{
                  background: url("../resources/icon-upload.png") center/30% 45% no-repeat;
                }
              }
            }
          }
          .u-row-box-list{
            flex: 1;
            display:flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: $nav_transition;
            .u-row-cell-list{
              flex: 1;
              display:flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              .u-row-cell-item{
                position: relative;
                margin-left:20px;
                width:45px;
                height:45px;
                background: url("../resources/demo1.png") center/cover no-repeat;
                cursor: pointer;
                transition: $nav_transition;
                &:before{
                  position: absolute;
                  content:'x';
                  display:flex;
                  align-items: center;
                  justify-content: center;
                  width:45px;
                  height:45px;
                  right:0;
                  top:0;
                  font-size: 0px;
                  line-height: 0;
                  color: #fff;
                  z-index: 99;
                  transition: $nav_transition;
                }
                &:hover{
                  opacity: 0.7;
                }
                &:hover:before{
                  font-size: 45px;
                }
              }
            }
            .u-row-box-num{
              margin:0 10px;
            }
            .u-row-box-hide{
              max-width:0;
              background-color: #f88265;
              color: #fff;
              overflow: hidden;
              transition: $nav_transition;
            }
          }
        }
        .task-next{
          margin:20px auto;
          padding:10px 120px;
          color: #fff;
          background-color: $pri_color;
          cursor: pointer;
        }
        .task-search-btn{
          margin-left:20px;
          padding:15px 70px;
          color: #fff;
          background-color: #00CC99;
          cursor: pointer;
          transition: $nav_transition;
          &:hover{
            opacity: 0.8;
          }
        }
      }
      .m-select-total{
        width:100%;
        height:205px;
        overflow: hidden;
        transition: $nav_transition;
      }
      .m-select-search{
        height:40px;
        overflow: hidden;
        transition: $nav_transition;
      }
    }
    .m-select{
      margin-top:30px;
      width:100%;
      display: flex;
      flex-direction: row;
      border:1px solid #dedede;
      .u-select-option{
        flex: 1;
        border-right:1px solid #dedede;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding:10px 0;
        cursor: pointer;
        &:last-child{
          border-right: 0;
        }
      }
      .u-select-option-active{
        background-color: #63bcc0;
        color: #fff;
      }
    }
  }
  .g-task-choice-list{
    width:1060px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .m-choice-list{
      display: flex;
      flex-direction: row;
      margin-top:100px;
      padding-top:300px;
      width:100%;
      flex-wrap: wrap;
      .m-choice-cell{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right:20px;
        margin-bottom:20px;
        width:230px;
        height:230px;
        background-color: #fff;
        border:1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.69) 1px 1px 1px;
        transition: $nav_transition;
        cursor: pointer;
        &:nth-child(4n){
          margin-right:0;
        }
        .u-cell-item-head{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .u-item-head{
            width:100px;
            height:100px;
            border-radius: 100px;
            background: url("../resources/head1.png") center/cover no-repeat;
            box-shadow: rgba(222, 222, 222, 0.78) 1px 1px 1px;
          }
          .u-item-name{
            margin-top:6px;
            font-size: 20px;
          }
          .u-item-summary{
            margin-top:6px;
            font-size: 12px;
            color: #666;
          }
        }
        .u-cell-item-number{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width:100%;
          height:60px;
          padding:5px 5px;
          background-color: #f2f2f2;
          .u-item-icon{
            width:25px;
            height:25px;
          }
          .u-item-text{
            color: #333;
            font-size:12px;
          }
          .u-item-yxl{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #cbcbcb;
            .u-item-icon{
              background:url("../resources/icon-task-detail-num.png") center/contain no-repeat;
            }
          }
          .u-item-rate{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .u-item-icon{
              background:url("../resources/icon-task-detail-num.png") center/contain no-repeat;
            }
          }
        }
      }
      .m-choice-cell-active{
        background-color: #bfc7dd;
        .u-cell-item-head{
          color: #fff;
          .u-item-summary{
            color: #fff;
          }
        }
      }
    }
    .m-choice-page{
      width:100%;
      text-align: center;
    }
    .m-choice-next{
      margin:20px auto;
      padding: 10px 120px;
      color: #fff;
      background-color: #8A95B1;
      cursor: pointer;
    }
  }
  /* feedback */
  .g-feedback{
    height:100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    .g-map,.g-form{
      flex: 1;
      height:100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .m-card{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top:20px;
        width:100%;
        padding:30px;
        background-color: #fff;
        border:1px solid #dedede;
        box-shadow: rgba(161, 161, 161, 0.67) 1px 1px 1px;
        .m-map{
          width:100%;
          height:55%;
          background: url("../resources/demo1.png") center/cover no-repeat;
        }
        .m-contact{
          flex: 1;
          width:100%;
          .u-row{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top:20px;
            font-size:12px;
            color: #606060;
            .u-wechat,.u-qq,.u-weibo{
              width:50px;
              height:50px;
              cursor: pointer;
            }
            .u-wechat{
              background: url("../resources/icon-feedback-wechat.png") center/contain no-repeat;
            }
            .u-qq{
              background: url("../resources/icon-feedback-qq.png") center/contain no-repeat;
            }
            .u-weibo{
              background: url("../resources/icon-feedback-weibo.png") center/contain no-repeat;
            }
          }
        }
        form{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width:100%;
          height:100%;
          .m-row{
            width:100%;
            .u-contact{
              width:100%;
              height:50px;
              padding:15px;
              background-color: transparent;
              border:1px solid #dfdfdf;
            }
            .u-feedback{
              width:100%;
              height:100%;
              padding:15px;
              background-color: transparent;
              border:1px solid #dfdfdf;
              resize: none;
            }
            .u-submit{
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              width:100%;
              height:40px;
              background-color: #8a95b3;
              color:#fff;
              cursor: pointer;
            }
          }
        }
      }
    }
    .g-mid{
      width:30px;
    }
  }
  /* taskDetail */
  .g-task-base-info,.g-task-result,.g-task-result-info{
    margin-bottom: 30px;
    .m-card{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top:30px;
      width:100%;
      background-color: #fff;
      border:1px solid #dedede;
      box-shadow: rgba(161, 161, 161, 0.67) 1px 1px 1px;
    }
    .m-card-row{
      flex-direction: row;
      padding: 25px;
    }
  }
  .g-task-base-info{
    .u-card-title{
      width:100%;
      padding:8px 20px;
      background-color: #8a95b3;
      color: #fff;
      font-size:14px;
    }
    .u-top,.u-bottom{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      width:100%;
      .u-cell{
        flex:1;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        .u-icon{
          margin-right:15px;
          width:40px;
          height:40px;
        }
        .u-icon-time{
          background: url("../resources/icon-task-detail-time.png") center/contain no-repeat;
        }
        .u-icon-money{
          background: url("../resources/icon-task-detail-money.png") center/contain no-repeat;
        }
        .u-icon-status{
          background: url("../resources/icon-task-detail-status.png") center/contain no-repeat;
        }
        .u-icon-summary{
          background: url("../resources/icon-task-detail-summary.png") center/contain no-repeat;
        }
        .u-icon-link{
          background: url("../resources/icon-task-detail-website.png") center/contain no-repeat;
        }
        .u-text{
          .u-text-title{
            color: #2e2e2e;
          }
          .u-content{
            margin-top:5px;
            font-size:12px;
            color: #868686;
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word;
          }
        }
        .u-text-width{
          width:300px;
        }

      }
    }
    .u-top{
      margin-top:30px;
      border-bottom: 1px solid #d8d8d8;
      .u-cell{
        padding-bottom:40px;
      }
    }
    .u-bottom{
      margin-bottom:30px;
      .u-cell{
        padding-top:40px;
      }
    }
  }
  .g-task-result{
    .u-block{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      .u-block-title{
        font-size: 12px;
        color: #6e6e6e;
      }
      .u-block-content{
        margin-top:8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .content-icon{
          width: 30px;
          height: 30px;
          margin-right:10px;
        }
        .content-icon-num{
          background: url("../resources/icon-task-detail-num.png") center/contain no-repeat;
        }
        .content-icon-point{
          background: url("../resources/icon-task-detail-point.png") center/contain no-repeat;
        }
        .content-icon-transform{
          background: url("../resources/icon-task-detail-transform.png") center/contain no-repeat;
        }
        .content-num{
          font-size: 28px;
          color: #333;
        }
      }
    }
  }
  .g-task-result-info{
    .m-list{
      flex-wrap: wrap;
      .m-cell{
        width:33%;
        margin-bottom:30px;
        padding-right:30px;
        .m-cell-panel{
          width:100%;
          background-color: #fff;
          border:1px solid #dedede;
          box-shadow: rgba(161, 161, 161, 0.67) 1px 1px 1px;
          .m-cell-top{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .top-head{
              margin-top:20px;
              width:100px;
              height:100px;
              border-radius: 100%;
              background: url("../resources/head1.png") center/cover no-repeat;
              box-shadow: #dedede 1px 1px 1px;
            }
            .top-name{
              margin-top:10px;
              font-size: 20px;
              color: #333;
            }
            .top-tag{
              margin-top:2px;
              font-size: 12px;
              color: #b0b0b0;
            }
          }
          .m-cell-bottom{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top:20px;
            background-color: #f7f7f7;
            padding:15px 0;
            .bottom-num{
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .num-icon{
                width:20px;
                height:20px;
              }
              .num-icon-point{
                background: url("../resources/icon-task-detail-point-s.png") center/contain no-repeat;
              }
              .num-icon-transform{
                background: url("../resources/icon-task-detail-transform-s.png") center/contain no-repeat;
              }
              .num-content{
                font-size: 12px;
                color: #606060;
              }
            }
          }
        }
      }
    }
  }
  /* fairDetail */
  .g-fair-base-info{
    .m-box-row{
      display:flex;
      flex-direction: row;
      margin-top:30px;
      .m-card{
        flex: 1;
        display:flex;
        flex-direction: row;
        padding:20px 20px;
        background-color:#fff;
        border:1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
        .u-photo{
          width:360px;
          height:270px;
          background: url("../resources/demo1.png") center/cover no-repeat;
        }
        .u-info{
          display:flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width:200px;
          height:270px;
          padding:40px 20px 40px 40px;
          .u-info-title{
            font-size:14px;
            font-weight: 700;
            color:#333;
          }
          .u-info-list{
            .u-list-cell{
              display: flex;
              flex-direction: row;
              margin-top:10px;
              .u-cell-label{
                font-size: 12px;
                color: #333;
              }
              .u-cell-content{
                margin-left:15px;
                font-size: 12px;
                color: #666;
              }
              .u-cell-content-red{
                color: #f88265;
              }
            }
          }
        }
      }
      .g-mid{
        width:30px;
      }
      .m-card-column{
        flex: 1;
        display:flex;
        flex-direction: column;
        background-color:#fff;
        border:1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
        .u-data{
          flex: 1;
          display:flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          .u-data-icon{
            width:60px;
            height:45px;
          }
          .u-data-icon-point{
            background: url("../resources/icon-fair-point.png") center/contain no-repeat;
          }
          .u-data-icon-transform{
            background: url("../resources/icon-fair-transform.png") center/contain no-repeat;
          }
          .u-data-total{
            background: url("../resources/icon-fair-total.png") center/contain no-repeat;
          }
          .u-data-num{
            display:flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-left:15px;
            .u-num-title{
              font-size:12px;
              color:#333;
            }
            .u-num-content{
              font-size:24px;
              color:#f88265;
            }
          }
        }
      }
    }
  }
  .g-fair-task-info{
    margin-top:30px;
    .m-list{
      margin-top:30px;
      width:980px;
      border:1px solid #dedede;
      border-bottom:none;
      box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
      .m-cell{
        display:flex;
        flex-direction: column;
        width:100%;
        transition: $nav_transition;
        .m-content{
          display:flex;
          flex-direction: row;
          align-items: center;
          background-color: #fff;
          border-bottom:1px solid #dedede;
          border-left: 3px solid $pri_color;
          transition: $nav_transition;
          .u-content-value{
            flex: 1;
            display:flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height:90px;
            font-size:14px;
          }
          .u-content-btn{
            padding:8px 15px;
            color: #fff;
            background-color: #f88265;
            cursor: pointer;
            &:active{
              opacity: 0.9;
            }
          }
        }
        .m-more{
          width:100%;
          max-height:0;
          overflow: hidden;
          background-color: #f8f8f8;
          transition: $nav_transition;
          .m-more-cell{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height:90px;
            font-size:14px;
            border-bottom:1px solid #dedede;
            .u-more-value{
              width:200px;
              padding: 0 30px;
              display:flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              .u-more-head{
                width:60px;
                height:60px;
                background: url("../resources/demo1.png") center/cover no-repeat;
              }
              .u-more-name{
                margin-left:10px;
                color: #333;
                font-size: 14px;
              }
            }
            .u-more-value-mid{
              width: 500px;
              color: #333;
              font-size: 14px;
              line-height: 18px;
              word-wrap:break-word ;
            }
          }
        }
      }
      .m-cell-active{
        .m-content{
          border-left: 3px solid #00CC99;
        }
        .m-more{
          max-height:450px;
        }
      }
    }
  }
  /* authDetail */
  .g-passport-base-info{
    .m-card{
      display:flex;
      flex-direction: row;
      padding:30px 40px;
      background-color:#fff;
      border:1px solid #dedede;
      box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
      .u-image{
        width:400px;
        height:300px;
        background: url("../resources/demo1.png") center/cover no-repeat;
      }
      .m-info{
        flex: 1;
        display:flex;
        flex-direction: column;
        padding-left: 40px;
        .m-top{
          display:flex;
          flex-direction: row;
          align-items: center;
          .m-title{
            flex: 1;
            .u-text{
              font-size: 16px;
              font-weight: 700;
              color: #333;
            }
            .u-summary{
              margin-top:5px;
              font-size: 12px;
              color: #666;
            }
          }
          .m-jf{
            color: #00aaee;
            font-size: 12px;
          }
          .m-gz{
            margin-left:30px;
            padding:10px 20px;
            font-size: 14px;
            background-color: #f88265;
            color: #fff;
          }
        }
        .m-mid{
          margin-top:30px;
          border:1px solid #dedede;
          .m-row{
            display:flex;
            flex-direction: row;
            align-items: center;
            padding:10px 0;
            border-bottom:1px solid #dedede;
            &:last-child{
              border-bottom: 0;
            }
            .u-key{
              display:flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              width: 180px;
              border-right: 1px solid #dedede;
              .u-icon{
                width:24px;
                height:24px;
              }
              .u-icon-company{
                background: url("../resources/icon-mc.png") center/contain no-repeat;
              }
              .u-icon-address{
                background: url("../resources/icon-dz.jpg") center/contain no-repeat;
              }
              .u-icon-name{
                background: url("../resources/icon-xm.jpg") center/contain no-repeat;
              }
              .u-icon-phone{
                background: url("../resources/icon-sj.jpg") center/contain no-repeat;
              }
              .u-text{
                margin-left:30px;
                width:60px;
                text-align: center;
                font-size:12px;
                color: #333;
              }
            }
            .u-value{
              padding:0 30px;
            }
          }
        }
        .m-bottom{
          flex: 1;
          display:flex;
          flex-direction: row;
          align-items: flex-end;
          justify-content: flex-end;
          .u-update{
            padding:3px;
            font-size:12px;
            color: #f88265;
            border-bottom:1px solid #f88265;
            cursor: pointer;
          }
        }
      }
    }
  }
  .g-passport-auth-info{
    margin-top:30px;
    .g-row{
      display:flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      margin-top:30px;
      .m-left-list{
        width:160px;
        margin-right:50px;
        .m-row{
          margin-bottom:20px;
          .u-image{
            width:160px;
            height:90px;
            background-color: #fff;
            border:1px solid #dedede;
            box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
          }
          .u-text{
            margin-top:20px;
            font-size: 12px;
            color: #666;
            text-align: center;
          }
        }
      }
      .m-show{
        flex: 1;
        background-color: #fff;
        border:1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
        height:570px;
      }
    }
  }
  /* feedbackSuccess */
  .g-feedback-success{
    .m-card{
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding:60px 100px;
      background-color:#fff;
      border:1px solid #dedede;
      box-shadow: rgba(222, 222, 222, 0.65) 1px 1px 1px;
      .m-text{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .u-icon{
          width:80px;
          height:80px;
          background: url("../resources/icon-fair-point.png") center/contain no-repeat;
        }
        .u-text-title{
          margin-left:40px;
          .u-tip-title{
            font-size: 24px;
            color: #333;
            font-weight: 700;
          }
          .u-tip-summary{
            margin-top:10px;
            font-size:16px;
            color: #666;
          }
        }
      }
      .m-back-btn{
        margin-top:60px;
        padding:10px 50px;
        font-size: 14px;
        background-color: #00AA91;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  /* taskSuccess */
  .g-task-success{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    .g-task-success-info{
      flex: 1;
      .m-task-card{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding:50px;
        background-color: #fff;
        border: 1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.71) 1px 1px 1px;
        .u-task-icon{
          width:90px;
          height:90px;
          background: url("../resources/icon-task-success.png") center/contain no-repeat;
        }
        .u-task-text{
          margin-left:30px;
          margin-right:50px;
          font-size: 24px;
          font-weight: 700;
        }
      }
      .m-task-card-column{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:50px;
        background-color: #fff;
        border: 1px solid #dedede;
        box-shadow: rgba(222, 222, 222, 0.71) 1px 1px 1px;
        .m-task-list{
          margin-top:20px;
          width:100%;
          .m-task-cell{
            margin-top:10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            .u-task-key{
              font-size: 12px;
              color: #333;
              font-weight: 700;
            }
            .u-task-value{
              margin-left:5px;
              font-size: 12px;
              color: #666;
            }
          }
        }
        .m-head-list{
          margin-top:30px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          .m-head-cell{
            margin-left:20px;
            margin-bottom:15px;
            height:50px;
            width:50px;
            box-shadow: rgba(222, 222, 222, 0.75) 1px 1px 1px;
            background: url("../resources/demo1.png") center/cover no-repeat;
          }
        }
      }
    }
    .g-task-success-page{
      margin-left:50px;
      .m-page-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .u-page{
          width:320px;
          height:644px;
          padding: 80px 26px 80px 22px;
          background: url("../resources/icon-task-phone.png") center/contain no-repeat;
          .u-page-inner{
            width:100%;
            height:100%;
            background-color: #fff;
            border-radius: 2px;
            overflow: hidden;
          }
        }
        .u-icon{
          margin-left:20px;
          width: 130px;
          height: 116px;
          background: url("../resources/icon-task-hand.png") center/contain no-repeat;
        }
      }
    }
  }
  /* taskList */
  .g-task-detail-list{
    .m-task-list{
      width:100%;
      border:1px solid #dedede;
      box-shadow: #dedede 1px 1px 1px;
      thead{
        width:100%;
        tr{
          width:100%;
          height:80px;
          background-color: #f8f8f8;
          th{
            font-size: 14px;
            font-weight: 500;
            padding-top: 30px;
          }
        }
      }
      tbody{
        background-color: #fff;
        tr{
          height:80px;
          border-top:1px solid #dfdfdf;
          td{
            position: relative;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            padding-top: 27px;
            .table-link,.table-detail{
              display:inline-block;
              padding:5px 10px;
              color: #fff;
              cursor: pointer;
            }
            .table-link:hover,.table-detail:hover{
              opacity: 0.9;
            }
            .table-link{
              background-color: #f97a5b;
            }
            .table-detail{
              background-color: #62bcc0;
            }
            &:first-child:before{
               content:'';
               position: absolute;
               left:0;
               top:0;
               height:100%;
               width:3px;
             }
          }
          &:nth-child(2n) td:first-child:before{
            background-color: #62bcc0;
          }
          &:nth-child(2n+1) td:first-child:before{
            background-color: #8a95b3;
          }
        }
      }
    }
    .m-choice-page{
      margin-top:20px;
      text-align: center;
    }
  }
}
.g-info-hide{
  padding:0;
  .g-info{
    .m-panel{
      .m-row{
        .u-row-box{
          .u-row-box-list{
            .u-row-box-hide{
              max-width:200px;
              padding:5px 15px;
              cursor: pointer;
            }
          }
        }
      }
      .m-select-total{
        height:0;
      }
      .m-select-search{
        margin:0;
        height:0;
      }
    }
  }
}
/* End Platform */